<template>
  <view class="fixed bottom-0 left-0 z-1000 w-full bg-white pb-safe" :style="{ height: height + 'px' }">
    <!-- flex布局， items居中， justify-between 两端对齐 -->
    <view class="flex items-center">
      <view
        v-for="item in TAB_LIST"
        :key="item.path"
        class="flex h-full flex-1 flex-col items-center justify-center py-16"
        @click="onTab(item.path)"
      >
        <view class="mb-10 flex size-68 items-center justify-center rounded-full" :class="[currentPath === item.path && 'bg-[#1E90FF]']">
          <GlobalIconfont :width="36" :height="36" :url="currentPath === item.path ? item.activeIcon : item.icon" />
        </view>
        <view class="text-24 leading-34" :class="[currentPath === item.path && 'text-[#1E90FF]']">{{ item.content }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { TAB_LIST } from '../config'
import useRouter from '@/hooks/useRouter'

const { currentPath } = useRouter()
console.log('currentPage', currentPath)
const onTab = (value: string) => {
  uni.switchTab({
    url: value
  })
}

// 获取苹果底部安全区的高度
const safeAreaHeight = uni.getSystemInfoSync().safeAreaInsets?.bottom ?? 0
// 计算 Tabbar 高度
const height = computed(() => {
  return safeAreaHeight + 67
})

defineExpose({
  height: height.value
})
</script>

<style scoped lang="scss"></style>
